<template>
  <div class="viewcontainer" v-if="dataset">
    <el-dialog
      :title="detailTitle"
      :visible.sync="detailFormVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <hi-form
        ref="detailForm"
        v-if="detailFormVisible"
        size="mini"
        :model="adjustData"
        v-bind="form"
      ></hi-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickOk">确 定</el-button>
      </span>
    </el-dialog>
    <el-row class="view-header">
      <el-col :span="22">
        <hi-lquery v-bind="queryPanel" :target="dataset"></hi-lquery>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="batchAdjust">批量调整</el-button>
      </el-col>
    </el-row>

    <el-row class="view-main">
      <el-table
        ref="dataTable"
        :data="dataset.data"
        @selection-change="handleSelectionChange"
        height="100%"
        style="width: 100%"
        v-loading="dataset.loading"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" width="50" />
        <el-table-column prop="FSHOPDESC" label="店铺" width="180" />
        <el-table-column prop="FGOODSNUMBER" label="店内编码" width="180" />
        <el-table-column prop="FBARCODE" label="条形码" width="180" />
        <el-table-column prop="FDESC" label="通用名称" width="180" />
        <!-- <el-table-column prop="FBRAND" label="品牌" width="180" /> -->
        <el-table-column prop="FCLASS" label="类别" width="180" />
        <!-- <el-table-column prop="FDRUGCLASS" label="药品分类" width="180" /> -->
        <el-table-column prop="FSPEC" label="规格" width="300">
          <template slot-scope="scope">
            <div class="text-truncate" :title="scope.row.FSPEC">
              {{ scope.row.FSPEC }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="FSTOREUPPER" label="库存上限" width="140" />
        <el-table-column prop="FSTORELOWER" label="库存下限" width="140" />

        <el-table-column prop="FUNIT" label="单位" width="140" />
        <el-table-column prop="FPRICE" label="单价" width="140">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.FPRICE) }}
          </template>
        </el-table-column>
        <el-table-column prop="FAMOUNT" label="数量" width="140" />
        <el-table-column prop="FPROCOMPANY" label="生产厂家" width="200">
          <template slot-scope="scope">
            <div class="text-truncate" :title="scope.row.FPROCOMPANY">
              {{ scope.row.FPROCOMPANY }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="FMEDICARETYPE" label="医保类别" width="140" />
        <!-- <el-table-column prop="FCREATEDATE" label="创建日期" width="160" /> -->
        <el-table-column fixed="right" label="操作" width="60">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEdit(scope)">
              调整
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="view-footer pagebar">
      <hi-pagination
        background
        :total="dataset.total"
        :target="dataset"
      ></hi-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  HiPagination,
  HiLquery,
  HiVquery,
  DataSetContainer,
  HiForm,
  utils,
} from "hi-ui";
import viewBase from "@/views/base";
import storeQueryCfg from "../../store/query/dataset";
export default {
  name: "updownlist",
  extends: viewBase,
  components: {
    HiPagination,
    HiLquery,
    HiVquery,
    HiForm,
  },
  data() {
    let datasetCfg = Object.assign({}, storeQueryCfg, {
      action: "autoAction",
    });
    return {
      //调整数据
      adjustData: {
        up: null,
        down: null,
      },
      adjustAction: null,
      //数据桥梁
      dataBridge: new Map(),
      detailTitle: null,
      //编辑状态
      editstate: "add",
      editData: {},
      detailFormVisible: false,
      dataset: null,
      //数据集配置
      datasetCfg: datasetCfg,
      total: 100,
      multipleSelection: [],
      form: {
        columnsTotal: 1,
        items: [
          {
            name: "up",
            label: "库存上限",
          },
          {
            name: "down",
            label: "库存下限",
          },
        ],
      },
      //查询面板配置
      queryPanel: {
        columnsTotal: 3,
        fields: [
           {
            // element: "el-input",
            label: "店铺",
            name: "FSHOPDESC",
            element: "hi-select-grid",
            required: true,
            props: {
              selectOption: {
                loading: true,
                multiple: false,
                clearable: true,
                filterable: true,
                "allow-create": true,
                "collapse-tags": true,
              },
              lookup: {
                modelFile: "database/shop/dataset/ShopEntity.xml",
                label: "FDESC",

                tableprops: {
                  "show-header": false,
                  "max-height": 400,
                  white_space_nowrap: true,
                },
                returnFields: {
                  FSHOPDESC: "FDESC",
                  FSHOPDESCID: "FNUMBER",
                },
                columns: [
                  {
                    width: "140",
                    name: "FDESC",
                    label: "通用名称",
                  },
                ],
              },
            },
          },
          {
            element: "el-input",
            label: "店内编码",
            name: "FGOODSNUMBER",
          },
          {
            // element: "el-input",
            label: "通用名称",
            name: "FDESC",
            element: "hi-select-grid",
            props: {
              selectOption: {
                loading: true,
                multiple: false,
                clearable: true,
                filterable: true,
                "allow-create": true,
                "collapse-tags": true,
              },
              lookup: {
                modelFile: "database/drug/dataset/DrugEntity.xml",
                // label: "FDESC",
                // filtername: "FCOMMON",
                filternames: [
                  {
                    name: "FDESC",
                  },
                  {
                    name: "FPINYIN",
                    // operate: "like",
                  },
                  {
                    name: "FJIANPIN",
                  },
                ],
                active: false,
                tableprops: {
                  // border:true,
                  hideRowBorder: true,
                  stripe: true,
                  "show-header": false,
                  //fit:false,
                  size: "mini",
                  "max-height": 400,
                  white_space_nowrap: true,
                },
                returnFields: {
                  FDESC: "FDESC",
                  // FSHOPDESCID: "FNUMBER",
                },
                columns: [
                  {
                    width: "180",
                    name: "FDESC",
                    label: "通用名称",
                  },
                ],
              },
            },
          },
         
        ],
      },
    };
  },
  model: {
    prop: "value",
    event: "valuechange",
  },
  props: {
    value: {
      type: Object,
    },
  },

  computed: {},
  watch: {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //调整预警
    adjust(data, upVal, downVal) {
      let saveHelper = this.createSaveHelper(
        "store/query/dataset/QueryEntity.xml"
      );
      data.forEach((element) => {
        saveHelper.update(element, {
          FSTORELOWER: downVal,
          FSTOREUPPER: upVal,
        });
      });
      saveHelper.save().then((res) => {
        this.$message({
          message: "调整成功",
          type: "success",
        });
        this.detailFormVisible = false;
        this.dataset.reload();
      });
    },
    //批量
    batchAdjust() {
      let dataTable = this.$refs.dataTable;

      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择库存数据!");
        return;
      }
      this.detailFormVisible = true;
      this.adjustAction = "batch";
    },
    clickOk() {
      if (this.adjustData.down === null) {
        this.$message.error("请填写库存下限!");
        return;
      }
      if (this.adjustData.up === null) {
        this.$message.error("请填写库存上限!");
        return;
      }
      if (this.adjustData.down * 1 > this.adjustData.up * 1) {
        this.$message.error("库存下限不能大于库存上限");
        return;
      }
      if (this.adjustAction == "single") {
        this.adjust([this.editData], this.adjustData.up, this.adjustData.down);
      } else {
        let dataTable = this.$refs.dataTable;
        this.adjust(
          this.multipleSelection,
          this.adjustData.up,
          this.adjustData.down
        );
      }
      this.adjustData.up = null;
      this.adjustData.down = null;
    },
    showEdit(data) {
      this.dataset.curRecord = data.row;
      this.editstate = "edit";
      this.detailTitle = "库存上下限调整";
      this.adjustAction = "single";
      this.detailFormVisible = true;
      this.editData = Object.assign({}, this.dataset.curRecord);
    },
    /*   toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.dataTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.dataTable.clearSelection();
      }
    }, */
    formatMoney(val) {
      return utils.number.format(val, "￥");
    },
    afterquery() {
      this.dataset.load();
    },
  },

  mounted() {
    this.dataset = this.createDataSet(this.datasetCfg);
    this.dataBridge.set(this.dataset, ["dataTable", "detailForm"]);
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.view-main {
  padding: 0 8px;
  position: absolute;
  top: 100px;
  bottom: 50px;
  left: 0px;
  width: 100%;
}
</style>
